<template>
	<div v-loading="loading" class="settings">
		<el-radio-group @change="changechanid" class="i18nradio" v-model="type">
			<el-radio-button label="basic">基本设置</el-radio-button>
			<el-radio-button label="parameter">参数设置</el-radio-button>
		</el-radio-group>
		<div v-if="type == 'basic'">
			<el-form :model="data" label-width="auto">
				<el-form-item label="背景(整体):">
					<el-color-picker v-model="data.web.background" show-alpha :predefine="data.predefineColors" />
					<el-input v-model="data.web.background" class="rgbinput" placeholder="Please Input" />
				</el-form-item>
				<el-form-item label="背景(局部):">
					<el-color-picker v-model="data.web.Contentbackground" show-alpha :predefine="data.predefineColors" />
					<el-input v-model="data.web.background" class="rgbinput" placeholder="Please Input" />
				</el-form-item>
				<el-form-item label="文字颜色：">
					<el-color-picker v-model="data.web.color" show-alpha :predefine="data.predefineColors" />
					<el-input v-model="data.web.color" class="rgbinput" placeholder="Please Input" />
				</el-form-item>
			</el-form>
			<el-form :model="data" label-position="top" label-width="50px">
				<el-form-item label="文本:">
					<el-radio-group class="i18nradio" v-model="radio">
						<el-radio-button label="zh" @click=";($i18n.locale = 'zh'), key++">简体中文</el-radio-button>
						<el-radio-button label="en" @click=";($i18n.locale = 'en'), key++">English</el-radio-button>
					</el-radio-group>
					<tiptap v-if="radio == 'zh'" :content="data.web.content[radio]" @send-data="senddata" :height="'200'" :key="key" :editable="true" />
					<tiptap v-if="radio == 'en'" :content="data.web.content[radio]" @send-data="senddata" :height="'200'" :key="key" :editable="true" />
					<!-- <el-input @input="Contentedited" v-model="form.title" /> -->
				</el-form-item>
			</el-form>
		</div>
		<div v-if="type == 'parameter'">
			<el-form :model="data" label-width="auto">
				<el-form-item label="默认网络:">
					<el-select @change="changechanid" v-model="data.swap.chanid" placeholder="Select" style="width: 240px">
						<el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.chain">
							<span style="float: left">{{ item.name }}</span>
							<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">{{ item.swapname }}</span></el-option
						>
					</el-select>
				</el-form-item>
			</el-form>
			<div class="classdui">交易对设置</div>
			<el-form :model="data" label-width="auto">
				<el-form-item label="代币A:">
					<el-select filterable remote :remote-method="select" v-model="data.swap.tokena" placeholder="Select" style="width: 100%">
						<el-option v-for="(item, index) in tokenlista" :key="index" :label="item.name.toUpperCase()" :value="item.address" :disabled="item.address == data.swap.tokenb ? true : false" />
					</el-select>
				</el-form-item>
				<el-form-item label="代币B:">
					<el-select filterable remote :remote-method="select" v-model="data.swap.tokenb" placeholder="Select" style="width: 100%">
						<el-option v-for="(item, index) in tokenlista" :key="index" :label="item.name.toUpperCase()" :value="item.address" :disabled="item.address == data.swap.tokena ? true : false" />
					</el-select>
				</el-form-item>
			</el-form>
			<!-- 默认链  通过选择 -->
			<!-- 数据库结构  链ID  工厂合约  交易所名称 -->
			<!-- 代币AB  输入框-->
		</div>
	</div>
</template>
<script>
	// 这里要把index 和list 传给组件  组件修改时 实时传回
	import { dataRequest as api } from '@/api/api'
	import Tiptap from '@/components/Tiptap.vue'
	import { ethers } from 'ethers'
	export default {
		components: {
			Tiptap,
		},
		props: ['data'],
		data() {
			return {
				tokenlist: [],
				tokenlista: [],
				selectchain: null,
				options: [],
				type: 'basic',
				radio: this.$i18n.locale,
				photo: false,
				loading: true,
				key: 0,
			}
		},
		methods: {
			senddata(content) {
				this.data.web.content[this.radio] = content
			},
			async getdata() {
				this.loading = true
				try {
					let arr = await api('Query', 'chainlist', '')

					if (arr.code == 200) {
						this.options = [...arr.data]
					}
					// this.changechanid()
				} catch (error) {}
				this.loading = false
			},
			async changechanid() {
				this.loading = true
				if (this.data.swap.chanid) {
					let arr = await api('Query', 'tokenlist', { chain: this.data.swap.chanid })
					if (arr.code == 200) {
						this.tokenlist = [...arr.data]
						this.tokenlista = [...arr.data]
					}
					// 这里检查tokena名称
					if (this.data.swap.tokena && !this.tokenlist.some((obj) => obj.address.toLowerCase() == this.data.swap.tokena.toLowerCase())) {
						// 添加
						let tokenjson = await this.tokenname(this.data.swap.tokena)
						if (tokenjson) {
							this.tokenlista.push(tokenjson)
							this.tokenlist.push(tokenjson)
						}
					}
					if (this.data.swap.tokenb && !this.tokenlist.some((obj) => obj.address.toLowerCase() == this.data.swap.tokenb.toLowerCase())) {
						// 添加
						let tokenjson = await this.tokenname(this.data.swap.tokenb)
						if (tokenjson) {
							this.tokenlista.push(tokenjson)
							this.tokenlist.push(tokenjson)
						}
					}
				}
				this.loading = false
			},
			async select(query) {
				// 搜索名称  还要不等于第一个仓库的数据

				if (query.length < 42) {
					let tokenlist = this.tokenlist.slice()
					this.tokenlista = tokenlist.filter((item) => {
						return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.address.toLowerCase().indexOf(query.toLowerCase()) > -1
					})
				} else if (query.length == 42) {
					// 判断
					if (!this.tokenlist.some((obj) => obj.address.toLowerCase() == query.toLowerCase())) {
						let tokenjson = await this.tokenname(query)
						if (tokenjson) {
							this.tokenlista = [tokenjson]
							this.tokenlist.push(tokenjson)
						}
					} else {
						let tokenlist = this.tokenlist.slice()
						this.tokenlista = tokenlist.filter((item) => {
							return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 || item.address.toLowerCase().indexOf(query.toLowerCase()) > -1
						})
					}
					// 通过代币地址查询
					// 这里要使用合约查询
					//查询代币名称  然后返回
				} else {
					this.$message.error('代币地址长度错误')
					this.tokenlista = this.tokenlist.slice()
				}
			},
			async tokenname(query) {
				for (let i = 0; i < this.options.length; i++) {
					if (this.data.swap.chanid == this.options[i].chain) {
						try {
							let provider = new ethers.JsonRpcProvider(this.options[i].rpc)
							// 需要获取代币名称
							let abi = ['function symbol() external view returns (string memory)']
							let contract = new ethers.Contract(query, abi, provider)
							let name = await contract.symbol()
							return { chain: this.options[i].chain, address: query, name: name, eth: '0' }
						} catch (error) {
							this.$message.error('代币地址错误')
							this.tokenlista = this.tokenlist.slice()
							return false
						}
					}
				}
				// this.loading = false
			},
		},
		mounted() {
			this.getdata()
			// this.changechanid()
			// this.data.web['content']['zhongguo'] = '999'
			// this.data['ceshi'] = '新增的无需设置  直接在这里增加一个属性即可  拖拽页就没那么麻烦了'
		},
	}
</script>
<style scoped>
	.settings .rgbinput {
		width: 150px;
		margin-left: 10px;
	}

	.i18nradio {
		width: 100%;
		margin-bottom: 10px;
		align-items: center;
		justify-content: center;
	}
	.classdui {
		/* display: flex; */
		font-weight: bold;
		margin-bottom: 10px;
		/* align-items: center;
		justify-content: center; */
	}
</style>
